<script setup lang="ts">
import { reactive } from "vue";
import { FormInfo, InfoContainer, AppTable } from "../components";
import { formInfo, tableProps } from "../components/interface";
import { columns } from "./components/Table/column";
defineOptions({
  name: "AppDispatchManage"
});

const formProps1: formInfo = reactive({
  title: undefined,
  btnNames: [undefined, undefined, undefined],
  btnDisabled: [false, false, false],
  formInfoList: [
    {
      id: 1,
      title: "排产文件",
      inputType: "1",
      placeholder: "请选择",
      options: undefined
    }
  ]
});

const tableProps1: tableProps = reactive({
  tableData: [
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    },
    {
      data1: "XXX",
      data2: "C9-328",
      data3: "C9-329",
      data4: "yy-mm-dd-xx",
      data5: "XXX"
    }
  ],
  columns: columns,
  height: "436.5",
  pagination: undefined,
  onPagination: true
});
</script>

<template>
  <div>
    <!-- <el-row class="app-dispatch-head">
      <FormInfo
        class="dispatch-FormInfo"
        :title="formProps1.title"
        :btnNames="formProps1.btnNames"
        :btnDisabled="formProps1.btnDisabled"
        :formInfoList="formProps1.formInfoList"
      />
    </el-row>
    <el-row class="app-dispatch-footer">
      <InfoContainer>
        <AppTable
          :tableData="tableProps1.tableData"
          :columns="tableProps1.columns"
          :height="tableProps1.height"
          :pagination="tableProps1.pagination"
          :onPagination="tableProps1.onPagination"
        />
      </InfoContainer>
    </el-row> -->
    <el-row>
      <iframe
        width="100%"
        height="640px"
        src="http://10.8.58.42:8083/#/dispatch"
      />
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.app-dispatch-head {
  height: 14vh;

  .dispatch-FormInfo {
    padding-right: 60%;
  }
}

.app-dispatch-footer {
  height: 65vh;
  margin-top: 2vh;
}

.div {
  width: 100%;
  height: 100vh;
}
</style>
